<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="type + '分类'"
      width="45%"
      :close="handleClose"
      class="dialogStyle"
    >
      <el-form
        :inline="true"
        ref="formRef"
        label-width="100"
        :rules="rules"
        :model="state"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12"
            ><el-form-item label="分类名称" prop="typeName">
              <el-input v-model="state.typeName" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级类别">
              <el-select v-model="state.parentId" placeholder="请选择上级类别">
                <el-option
                  :label="v.typeName"
                  :value="v.projectTypeId"
                  v-for="v in projectTypeList"
                  :key="v.projectTypeId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注说明">
              <el-input v-model="state.remark" type="textarea" placeholder="请输入备注说明" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用状态">
              <el-switch v-model="state.status" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model.number="state.typeOrder" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose"  class="button_cancel2">取消</el-button>
          <el-button @click="submitHandel" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElDialog, ElRow, ElCol, ElSwitch, ElMessage } from 'element-plus'
import { publicProject } from '@/api/project'

const props = defineProps({
  type: {
    type: String,
    default: ''
  }
})
// 1, "投资类"
// 2, "设计类"
// 3, "开发类"
// 4, "运营类"
// 5, "公共类"
const projectTypeList = ref([
/*  {
    typeName: '投资类',
    projectTypeId: 101
  },*/
  {
    typeName: '设计类',
    projectTypeId: '102'
  },
  {
    typeName: '开发类',
    projectTypeId: '103'
  },
  {
    typeName: '运营类',
    projectTypeId: '104'
  },
  {
    typeName: '公共类',
    projectTypeId: '5'
  }
])

const rules = {
  typeName: [{ required: true, message: '项目类型不能为空', trigger: 'blur' }]
}

const state = ref({})
const dialogVisible = ref(false)

const emits = defineEmits(['getPage'])
const handleClose = () => {
  dialogVisible.value = false
  state.value = {}
  emits('getPage')
}
const formRef = ref(null)

const submitHandel = () => {
  state.value.status = state.value.status ? 1 : -1

  formRef.value.validate((valid, fields) => {
    if (valid) {
      if (props.type == '新建') {
        publicProject.publicTypeCreate(state.value).then((res) => {
          if (res.code == 200) {
            ElMessage.success('操作成功')
            handleClose()
          }
        })
      } else {
        publicProject.publicTypeUpdate(state.value).then((res) => {
          if (res.code == 200) {
            ElMessage.success('操作成功')
            handleClose()
          }
        })
      }
    }
  })
}

const getByIdProjectType = (id) => {
  publicProject.getByIdProjectType(id).then((res) => {
    if (res.code == 200) {
      state.value = res.data
      state.value.status = res.data.status == 1 ? true : false
      console.log(state.value)
    }
  })
}

/*const getProjectTypeVo = () => {
	publicProject.getProjectTypeVo().then((res) => {
		if ((res.code = 200)) {
			projectTypeList.value = res.data;
		}
	});
};*/

const open = (id) => {
  dialogVisible.value = true
  console.log(id)
  if (id) {
    getByIdProjectType(id)
  }
}

onMounted(() => {
  // getProjectTypeVo();
})

defineExpose({
  open
})
</script>
<style lang="scss" scoped>
.el-input,
.el-select,
.el-form-item {
  width: 100% !important;
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>

